<template>
<div style="margin-bottom: 60px">
  <!--  1.我的相关-->
  <div class="div1">
<!--    头像-->
    <div class="div11">
      <van-row gutter="20">
        <van-col span="6">
<!--          <van-image-->
<!--            round-->
<!--            width="4rem"-->
<!--            height="4rem"-->
<!--            src="{{userDetail.img}}"-->
<!--        />-->
          <img style="width: 80px;height: 80px;border-radius: 50px" :src="userDetail.img">
        </van-col>
        <van-col span="6"></van-col>
        <van-col span="3"><van-icon name="flower-o" size="2rem"/>
        </van-col>
        <van-col span="3"><van-icon name="scan" size="2rem"/>
        </van-col>
        <van-col span="3"><van-icon name="envelop-o" size="2rem"/>
        </van-col>
      </van-row>

    </div>
<!--    名字-->
    <van-row gutter="20">
      <van-col span="4"></van-col>
      <van-col span="6"> <p >{{userDetail.name}}</p></van-col>
      <van-col span="12"><van-cell  title="" value="个人主页" size="large" is-link @click="tz()"/></van-col>
      <van-col span="1"></van-col>
    </van-row>
    <div style="margin-left: 0px;margin: 0px">

      <van-row gutter="20" style="margin: 15px">
        <van-col span="2"></van-col>
        <van-col span="6" style="margin-left: 30px;color: #ee0a24;font-size: 16px">等级:{{integrals.grade}}</van-col>
        <van-col span="6" style="margin-left: 60px;color: blue;font-size: 16px">积分:{{integrals.integral}}</van-col>
        <van-col span="10"></van-col>
      </van-row>

    </div>
  </div>
<!--  2.会员相关-->
  <div class="div2">
<!--    会员-->
    <div>
      <van-cell title="Keep·会员" value="立即开通" is-link to="/vip"/>
    </div>
<!--    广告-->
    <div class="div22">
      <van-row gutter="10">
        <van-col span="11">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <div>
                <label @click="tz1()">会员定制减脂计划</label>
                <van-icon name="arrow" />
                <br>
                <label>开启你的专属方案</label>
              </div>
<!--              <span class="custom-title"></span>-->
<!--              <van-tag>开启你的专属方案</van-tag>-->
            </template>
          </van-cell>
        </van-col>
        <van-col span="2">|</van-col>
        <van-col span="11">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <div>
                <label @click="tz2()">夏日福利仅剩一天</label><van-icon name="arrow" />
                <br>
                <label>腾讯年卡送不停！</label>
              </div>
              <!--              <span class="custom-title"></span>-->
              <!--              <van-tag>开启你的专属方案</van-tag>-->
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </div>
  </div>
<!--  3.运动相关-->
  <div class="div3">
    <van-row gutter="20">
      <van-col span="12">
        <div>
          <van-cell title="身高" />
        </div>
        <div>
          <van-cell center :title="userDetail.tall" label="本周消耗0千卡" />
        </div>
      </van-col>
      <van-col span=12>
        <div>
          <van-cell title="体重"  />
        </div>
        <div>
          <van-cell center :title="userDetail.weight" label="上次记录 今天" />
        </div>
      </van-col>
    </van-row>
  </div>
<!--  4.收藏订阅-->
  <div class="div4">
<!--    <van-tabs v-model:active="active" swipeable>-->
<!--      <van-tab v-for="s in indexs" :title="s.index">-->
<!--        {{ s.index }}-->
<!--      </van-tab>-->
<!--    </van-tabs>-->
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab title="我的收藏" thumb-link="../logo.png">
        <van-card
            desc="0节课程"
            title="我收藏的课程"
            thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mianfeiwendang.com%2Fpic%2F32234e463276b7690f6b8386a4f3d50185c7fd96%2F1-810-jpg_6-1440-0-0-1440.jpg&refer=http%3A%2F%2Fimg.mianfeiwendang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659175427&t=f13962096eef56b0e9be18aceac45473"
        />
      </van-tab>
      <van-tab title="订阅">
        <!-- 指定单位，支持 rem, vh, vw -->
        <van-empty image-size="10rem" description="暂无订阅的内容" />
      </van-tab>
      <van-tab title="练过">
        <!-- 指定单位，支持 rem, vh, vw -->
        <van-empty image-size="10rem" description="暂无练过的课程" />
      </van-tab>
      <van-tab title="更多">
        <div class="div441">
          <van-cell title="训练营" icon="friends">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-cell>
        </div>
        <div class="div441">
          <van-cell title="已购内容" icon="bag">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-cell>
        </div>
        <div class="div441">
          <van-cell title="离线下载" icon="live">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-cell>
        </div>
      </van-tab>
    </van-tabs>
  </div>
<!--  5.登录按钮-->
  <div class="div5">
    <van-button type="warning" @click="loginOut" round>退出登录</van-button>
  </div>
</div>
</template>

<script>
export default {
  name: "MyView",
  data() {
    return{
      integrals:{
        integral: 0,
        grade: 0
      },
      userDetail:{
        // name: "汪老六",
        // img: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        // city: "北京市大兴区",
        // introduction: "一起燃烧脂肪吧",
        // sex: "男",
        // hobby: "跑步,游泳",
        // birthday: "2022-05-18 11:20:50",
        // tall: 180+"cm",
        // weight: 70+"kg"
        name: "",
        img:require("../assets/images/imgs-tx.png"),
        city: "",
        introduction: "",
        sex: "",
        hobby: "",
        birthday: "",
        tall: null,
        weight: null
      }
    }
  },
  mounted() {
    this.axios.get("/api/userintegral/selectsign.do").then((res)=>{
      if (res.data.code==200) {
        this.integrals=res.data.data;
      }
    })
    this.axios.get("/api/userpage/all.do").then((res)=>{
      if (res.data.code==200) {
        //console.log(res.data.data);
        this.userDetail=res.data.data;
      }
    })
  },
  methods:{
    tz(){
      this.$router.push("/updateData");
    },
    tz1() {
      this.$router.push("/Plan");
    },
    tz2() {
      this.$router.push("/shoptype");
    },
    loginOut(){
      this.axios.get("/api/user/loginout?token="+this.$store.state.token).then((r)=>{
        if (r.data.code==200){
          this.$toast("退出成功")
          this.$router.push("/")
        }else {
          this.$toast("网络故障，退出失败")
        }

      })
    }
  }
}
</script>

<style scoped>
.div1{
  border: 1px solid  #778899;
  border-radius: 10px;
  margin-bottom: 5px;
}
.div2{
  margin: 30px;
  border: 6px solid  #778899;
  border-radius: 10px;
}
.div3{
  margin-bottom: 5px;
  border-radius: 5px;
}
.div4{
  margin-top: 10px;
  border-radius: 5px;
}
.div11{
  margin-top: 20px;
  margin-left: 10%;
}
.div22{
  margin-top: 10px;
}
.div441{
  background-color: lightslategrey;
  margin: 10px;
}
.div5{
  margin-top: 20px;
}
</style>
